import React,{useState} from 'react'
import style from "./index.module.scss"
import {Breadcrumb,Input,Table} from "antd"
export default function Hetongmuban() {
    const columns =[
        {
            title: '材料名称',
            dataIndex: 'name',
        },
        {
            title: '材料类型',
            dataIndex: 'type',
        },
        {
            title: '附件上传数量',
            dataIndex: 'num',
        },{
            title:"材料状态",
            dataIndex:"state",
        },{
            title:"排序值",
            dataIndex:"data"
        },{
            title:"更新时间",
            dataIndex:"update"  
        },{
            title:"操作",
            dataIndex:"caozuo",
            render:()=>{
                return (<div className={style.do}>
                    <span>查看</span>
                    <span>编辑</span>
                    <span>禁用</span>
                </div>)
                
            }
        }
    ]
    const data = [
        {
            key: 1,
            name: '工作证明',
            type: '附件',
            num: '3',
            state:'使用中',
            data:'0',
            update:'2018-12-01',
        },{
            key: 2,
            name: '银行流水证明',
            type: '附件',
            num: '3',
            state:'未使用',
            data:'100',
            update:'2018-12-01',
        },{
            key: 3,
            name: '保单证明',
            type: '附件',
            num: '3',
            state:'未使用',
            data:'100',
            update:'2018-12-01',
        },{
            key: 4,
            name: '房产证明',
            type: '附件',
            num: '3',
            state:'未使用',
            data:'100',
            update:'2018-12-01',
        }
    ]
    const [pageSize, setPageSize] = useState('10')
    const [currentPage, setCurrentPage] = useState('1')
    const getPage = (page, pageSize) => {
        console.log(page, pageSize)
        setCurrentPage(page)
        setPageSize(pageSize)
    }
    return (
        <div className={style.hetong}>
            <Breadcrumb style={{ margin: '16px 0',display:"flex",justifyContent:"start"}}>
                <Breadcrumb.Item>首页</Breadcrumb.Item>
                <Breadcrumb.Item>产品工厂</Breadcrumb.Item>
                <Breadcrumb.Item>贷款材料管理</Breadcrumb.Item>
            </Breadcrumb>
            <div className={style.caozuo}>
                <div className={style.chaxun}>
                    <div className={style.input}><Input placeholder='合同编号' maxLength={150}></Input></div>
                    <button className={style.btn}>查询</button>
                </div>
                <div className={style.xinzeng}>
                    <button className={style.btn}>新增</button>
                </div>
            </div>

            <div className='title'>
                    <p>数据列表</p>
                </div>
                    <Table columns={columns} dataSource={data} pagination={{
                            total: data.length,
                            showQuickJumper: true,
                            showSizeChanger: true,
                            pageSizeOptions: ['10', '20', '30'],
                            showTotal: total => `共${Math.ceil(total / pageSize)}页/ ${total} 条数据`,
                            onChange: getPage
                        }}
                            onRow={record => {
                                return {
                                    onClick: event => { console.log(event, record) },
                                }
                            }}
                        />

            <div className={style.footer}>
                Copyright © 2018 深圳市涛涛金融科技有限公司, All Rights Reserved.
            </div>
        </div>
    )
}
